<template>
	<view>
		<view class="order-header">
			<view class="u-p-30 bg-white">
				<view class="u-flex">
					<view class="u-flex-1">
						<u-search v-model="key" placeholder="搜索" :show-action="false" shape="square" clearabled @change="getList(true)"></u-search>
					</view>
					<view class="u-p-l-30">
						<button size="mini" @click="add" class="u-h-64" style="display: block;">
							<view class="u-flex u-align-items u-justify-content u-h-60">
								<u-icon name="plus" size="28" class="u-tips-color"></u-icon>
								<text class="u-p-l-10 u-tips-color">新建</text>
							</view>
						</button>
					</view>
				</view>
			</view>
			<!-- <list-filter-panel :defaultFilter="false" @filter-change="filterChange">
				<template #extra-filters>
					<view class="item">
						<view class="u-p-b-10"><text class="tips-txt">站点状态</text></view>
						<view class="tag-con">
							<view class="cell" :class="item.check == true?'on':''" v-for="(item,index) in statelist" :key="index" @click="choose(item,'statelist','state')">
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
				</template>
				
				<template #actions>
					<view class="bottom-btn">
						<view class="btn cancel u-m-r-30" @click="clean">清空</view>
						<view class="btn confirm" @click="getList(true)">确定</view>
					</view>
				</template>
			</list-filter-panel> -->
		</view>
		<view class="grid-box" v-for="(item, index) in list" :key="index">
			<navigator class="order" @click="details(item)">
				<view class="u-p-b-20 u-flex">
					<u-avatar :src="item.icon" mode="square"></u-avatar>
					<view class="u-flex-1 u-p-l-30">
						<view class="u-flex">
							<view class="u-flex-1">
								<text class="u-font-32 u-p-r-20">{{item.name}}</text>
							</view>
							<u-tag v-if="item.ismanage" text="营业中" type="success" size="mini"/>
							<u-tag v-else text="已闭店" type="error" size="mini"/>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<view class="u-p-t-8">
							<view class="u-flex u-font-24">
								<text class="u-font-24 u-tips-color">所属加盟商：{{item.franchise.name}}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="bottom u-border-top u-p-t-20">
					<view>
						<text class="u-font-24 u-tips-color">地址：{{item.address.address}}</text>
					</view>
					<view>
						<text class="u-font-24 u-tips-color">联系电话：{{item.telephone}}</text>
					</view>
					<view>
						<text class="u-font-24 u-tips-color">营业时间：{{item.servicetime}}</text>
					</view>
				</view>
			</navigator>
		</view>
		<view class="u-p-30">
			<u-loadmore :status="loadStatus" />
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		props: {
			sendFranchiseId: {
				type: [Number, String],
				default: null
			}
		},
		data() {
			return {
				loadStatus: 'loadmore',
				PageIndex: 1,
				PageSize: 20,
				key: '',
				cityid: 0, //地区
				// franchiseId: 0, //所属加盟商
				// 站点状态
				state: 0,
				statelist: [
					{
						id: 0,
						name: '全部',
						check: true
					},
					{
						id: 1,
						name: '冻结',
						check: false
					},
					{
						id: 2,
						name: '启用',
						check: false
					},
	
				],
				list: []
			}
		},
		onPullDownRefresh() {
			this.orderList = []
			this.PageIndex = 1
			this.getList().then(() => {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			})
		},
		onReachBottom(e) {
			this.reachBottom()
		},
		onLoad() {
			this.getList(true)
		},
		mounted() {
			this.getList(true)
		},
		computed: {
			...mapState({
				franchiseId: state => state.franchiseId,
				userdetail: state => state.userdetail
			})
		},
		methods: {
			clean(){
				this.getList(true)
			},
			choose(item,options,type){
				this[options].map((cell)=>{
					cell.check = false
				})
				item.check = true
				this[type] = item.id
				this.getList(true)
				console.log(this[options],item)
			},
			filterChange(obj){
				console.log('filterChange',obj)
				for(let key in obj){
					this.$set(this,key,obj[key])
				}
				this.getList(true);
			},
			reachBottom() {
				// 此tab为空数据
				this.PageIndex += 1
				if (this.loadStatus == 'loadmore') {
					this.getList()
				}
			},
			// 页面数据
			getList(reload = false) {
				if(reload){
					this.PageIndex = 1
					this.list = []
				}
				this.loadStatus = "loading"
				
				return this.$u.post('/Store/List', {
					"storeId": this.storeId,
					"PageIndex": this.PageIndex,
					"PageSize": this.PageSize,
					"key": this.key,
					"cityid": this.cityid || 0,
					"state": this.state,
					"franchiseId": this.sendFranchiseId || this.franchiseId || 0
				}).then((res) => {
					let dataArray =  res.rows
					
					if (dataArray.length > 0) {
						dataArray.forEach((item) => {
							if(item.icon != ''){
								item.icon = this.fileURL + item.icon	
							}
							this.list.push(item)
						})
						if (dataArray.length < this.PageSize) {
							this.loadStatus = "nomore"
						} else {
							this.loadStatus = "loadmore"
						}
					} else {
						this.loadStatus = "nomore"
					}
					
					return res.rows
				})
			},
			details(item){
				uni.navigateTo({
					url: '/pages/shop/views/views?id='+item.id
				})
			},
			add(){
				uni.navigateTo({
					url: '/pages/shop/my/create/create'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag-con{
		display: flex;
		flex-wrap: wrap;
		.cell{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 60rpx;
			padding: 20rpx;
			border: 1px solid $u-border-color;
			margin: 5rpx 10rpx 10rpx 0;
			border-radius: 10rpx;
			font-size: 24rpx;
			&.on{
				color: $u-color-blue;
				border-color: $u-color-blue;
			}
		}
	}
	.bottom-btn{
		display: flex;
		margin-top: 30rpx;
		.btn{
			flex: 1;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			&.cancel{
				background-color: $u-color-light;
			}
			&.confirm{
				background-color: $u-color-blue;
				color: #fff;
			}
		}
	}
</style>
